<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="药品id" prop="drugId">
        <el-input
          v-model="queryParams.drugId"
          placeholder="请输入药品id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="药品名称" prop="drugName">
        <el-input
          v-model="queryParams.drugName"
          placeholder="请输入药品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="规则名称" prop="ruleName">
        <el-input
          v-model="queryParams.ruleName"
          placeholder="请输入规则名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option label="开启" value="1" />
          <el-option label="关闭" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:rule:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:rule:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:rule:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:rule:export']"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="ruleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" />
      <el-table-column label="药品名称" align="center" prop="drugName" />
      <!-- <el-table-column label="药品标签" align="center" prop="tag" /> -->
      <el-table-column label="规则名称" align="center" prop="ruleName" />
      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
      <el-table-column label="表达式" align="center" prop="expression" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:rule:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改药品规则对话框 -->
    <el-dialog title="添加规则" :visible.sync="ruleShow" width="600px" append-to-body>
      <el-form ref="formRule" :model="formRule" label-width="100px">

        <el-form-item label="规则分类">
          <el-radio-group v-model="formRule.ruleCategory" @change="changeRuleCategory">
            <el-radio
              v-for="dict in ruleCategoryOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="规则类型">
          <el-select v-model="formRule.ruleType" placeholder="请选择规则类型">
            <el-option
              v-for="dict in ruleTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则编码" prop="code">
          <el-input v-model="formRule.code" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="选择模型" v-if="currentHide">
          <el-select v-model="formRule.modelId" placeholder="请选择算法类型">
            <el-option
              v-for="dict in algorithmOptions"
              :key="dict.code"
              :label="dict.name"
              :value="dict.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据范围">
          <el-button
              type="info"
              icon="el-icon-upload"
              size="mini"
              @click="handleTable"
            >选择表</el-button>
            <el-row>
              <el-table ref="table" :data="tableIds" height="160px" >
                <el-table-column prop="tableName" label="表名称"></el-table-column>
                <el-table-column prop="tableComment" label="表描述"></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                   <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleColumn(scope.row)"
                    >选择字段</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
        </el-form-item>
        <el-form-item label="关键词" prop="keywords" v-if="!currentHide">
          <el-input v-model="formRule.keywords" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="语义" prop="semanteme" v-if="!currentHide">
          <el-input v-model="formRule.semanteme" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <!-- <el-form-item label="是否取反" prop="negateFlag">
          <el-input v-model="formRule.negateFlag" placeholder="请输入是否取反" />
        </el-form-item> -->
        <el-form-item label="是否取反" prop="negateFlag" v-if="!currentHide">
                <el-switch v-model="formRule.negateFlag" active-value='1' inactive-value='0' @change="swithStatus"></el-switch>
        </el-form-item>
        <el-form-item label="匹配方式" v-if="!currentHide">
          <el-select v-model="formRule.matchType" placeholder="请选择匹配方式">
            <el-option
              v-for="dict in matchTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="数值计算" prop="targetValue">
          <el-input v-model="formRule.unit" placeholder="请输入单位换算" />
        </el-form-item> -->
        <el-form-item label="目标值" prop="targetValue" v-if="!currentHide">
          <el-input v-model="formRule.targetValue" placeholder="请输入目标值" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRuleForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
     <el-dialog :title="title" :visible.sync="openTable" width="600px" append-to-body>
      <el-row>
        <el-table ref="table" :data="dbTableList" height="360px" @selection-change="handleSelectionTableChange" >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="tableName" label="表名称"></el-table-column>
          <el-table-column prop="tableComment" label="表描述"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        </el-table>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTableForm">确 定</el-button>
        <el-button @click="cancelTable">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="openColumn" width="600px" append-to-body>
      <el-row>
        <el-table ref="table" :data="dbColumnList" height="360px" @selection-change="handleSelectionColumnChange" >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="columnName" label="列名称"></el-table-column>
          <el-table-column prop="columnComment" label="列描述"></el-table-column>
        </el-table>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitColumnForm">确 定</el-button>
        <el-button @click="cancelColumn">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :visible.sync="open"
      size="50%"
    >
      <div slot="title" class="drawerTitle">{{title}}</div>
      <div class="drawerContent">
          <div v-if="step == 0">
              <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="药品名称" prop="drugName">
                <el-input v-model="form.drugName" placeholder="请输入药品名称" />
              </el-form-item>
              <el-form-item label="规则名称" prop="ruleName">
                <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
              </el-form-item>

              <!-- <el-form-item label="时间" prop="createTime">
                <el-input v-model="form.createTime" placeholder="请输入时间" />
              </el-form-item> -->
              <!-- <el-form-item label="创建人" prop="updateBy">
                <el-input v-model="form.updateBy"  placeholder="请输入内容" />
              </el-form-item> -->
              <el-form-item label="是否有效" prop="status">
                <el-switch v-model="form.status" active-value='1' inactive-value='0' @change="swithStatus"></el-switch>
              </el-form-item>
            </el-form>
            <div class="btnStyle">
              <el-button type="primary" @click="submitForm">下一步</el-button>
            </div>
          </div>
          <div v-if="step == 1">
              <div>
                <el-row class="userInfo">
                规则信息
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="detail_content">
                            <div class="detail_left detail_left_left">药品名称:</div>
                            <div class="detail_right">{{form.drugName}}</div>
                        </div>
                        <!-- <div class="detail_content">
                            <div class="detail_left detail_left_left">企业名称:</div>
                            <div class="detail_right">{{dateilData1.buyerName}}</div>
                        </div> -->
                        <div class="detail_content">
                            <div class="detail_left detail_left_left">时间:</div>
                            <div class="detail_right">
                                <!-- {{formDetails.id}} -->
                            </div>
                        </div>
                        <div class="detail_content">
                            <div class="detail_left detail_left_left">是否有效:</div>
                            <div class="detail_right">
                              <!-- {{formDetails.id}} -->
                              <el-switch :disabled="true" v-model="form.status" active-value='1' inactive-value='0' @change="swithStatus"></el-switch>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                          <div class="detail_content">
                            <div class="detail_left detail_left_right">规则名称:</div>
                            <div class="detail_right">{{form.ruleName}}</div>
                        </div>
                        <div class="detail_content">
                            <div class="detail_left detail_left_right">创建人:</div>
                            <div class="detail_right">
                              {{form.updateBy}}
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="userInfo">
                    添加规则
                </el-row>
                <div class="addBtn">
                    <el-button type="primary" @click="add_rule">添加</el-button>
                  </div>
                <el-row :gutter="20" v-if="tableData.length>0">
                    <el-table
                        :data="tableData"
                    >
                     <el-table-column
                          prop="code"
                          label="规则编码"
                         >
                        </el-table-column>
                        <el-table-column
                          prop="ruleCategory"
                          label="规则分类"
                          :formatter="ruleCategoryFormat"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="keywords"
                          label="关键词"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="semanteme"
                          label="语义"
                         >
                        </el-table-column>
                        <el-table-column
                          prop="algorithm"
                          label="算法"
                          :formatter="algorithmFormat"
                        >
                        </el-table-column>
                      </el-table>
                </el-row>

            </div>
            <div class="btnStyle" v-if="tableData.length>0">
              <el-button type="primary" @click="submitSuccess">下一步</el-button>
            </div>
          </div>
          <div v-if="step == 2">
            <div>
                <el-row class="userInfo">
                规则信息
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="detail_content">
                            <div class="detail_left detail_left_left">药品名称:</div>
                            <div class="detail_right">{{form.drugName}}</div>
                        </div>
                        <!-- <div class="detail_content">
                            <div class="detail_left detail_left_left">企业名称:</div>
                            <div class="detail_right">{{dateilData1.buyerName}}</div>
                        </div> -->
                        <div class="detail_content">
                            <div class="detail_left detail_left_left">时间:</div>
                            <div class="detail_right">
                                <!-- {{formDetails.id}} -->
                            </div>
                        </div>
                        <div class="detail_content">
                            <div class="detail_left detail_left_left">是否有效:</div>
                            <div class="detail_right">
                              <!-- {{formDetails.id}} -->
                              <el-switch :disabled="true" v-model="form.status" active-value='1' inactive-value='0' @change="swithStatus"></el-switch>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                          <div class="detail_content">
                            <div class="detail_left detail_left_right">规则名称:</div>
                            <div class="detail_right">{{form.ruleName}}</div>
                        </div>
                        <div class="detail_content">
                            <div class="detail_left detail_left_right">创建人:</div>
                            <div class="detail_right">
                              {{form.updateBy}}

                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="userInfo">
                    添加规则
                </el-row>
                <el-row :gutter="20" v-if="tableData.length>0">
                    <el-table
                        :data="tableData"
                    >
                        <el-table-column
                          prop="code"
                          label="规则编码"
                         >
                        </el-table-column>
                        <el-table-column
                          prop="ruleCategory"
                          label="规则分类"
                          :formatter="ruleCategoryFormat"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="keywords"
                          label="关键词"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="semanteme"
                          label="语义"
                         >
                        </el-table-column>
                        <el-table-column
                          prop="algorithm"
                          label="算法"
                          :formatter="algorithmFormat"
                        >
                        </el-table-column>
                      </el-table>
                </el-row>
                <el-row class="userInfo">
                规则表达式：
                </el-row>
                 <el-row :gutter="20" >
                   <el-input v-model="form.expression"  placeholder="请输入规则" />
                </el-row>

            </div>
            <div class="btnStyle">
              <el-button type="primary" @click="saveBtn">保存</el-button>
            </div>
          </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listRule, getRule, delRule, addRule,addRuleDetails, updateRule } from "@/api/system/rule";
import { listDbTable , listDbColumn} from "@/api/system/resolve";
import { listModel } from "@/api/system/model";
export default {
  name: "Rule",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 药品规则表格数据
      ruleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openTable: false,
      openColumn:false,
      tableRowData:{},
      // 是否显示规则
      ruleShow:false,
      step:0,  // 显示步数
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        drugId: undefined,
        drugName: undefined,
        tag: undefined,
        ruleName: undefined,
        status: undefined,
      },
      // 表单参数
      form: {
        drugId: undefined,
        drugName: undefined,
        tag: undefined,
        ruleName: undefined,
        status: '0',
        updateBy: undefined,
        expression:'',
      },
      tableData: [],
      formRule:{
        ruleCategory:5,
        ruleType:0,
        semanteme:'',
        keywords:'',
        algorithm:'',
        code:'',
        modelId:'',
        negateFlag: '',
        matchType: 0,
        targetValue: '',
        unit:'',
        tables:[]
      },
      resolveTables:[],
      drugRuleId:'',
      tableIds:[],
      tableColumnIds:[],
      // 非单个禁用
      single: true,
      tableSingle:true,
      columnSingle:true,
      // 非多个禁用
      multiple: true,
      tableMultiple:true,
      columnMultiple:true,
      dbTableList: [],
      dbColumnList:[],
          // 规则分类,0字符,1数字字典
      ruleCategoryOptions: [],
      // 规则类型字典
      ruleTypeOptions: [],
      // 算法类型字典
      algorithmOptions: [],
      // 字符匹配方式字典
      matchTypeOptions: [],
      currentHide: false
    };
  },
  created() {
    this.getList();
    this.getDicts("drug_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("drug_rule_category").then(response => {
      this.ruleCategoryOptions = response.data;
    });
    this.getDicts("drug_rule_type").then(response => {
      this.ruleTypeOptions = response.data;
    });
    this.getDicts("algorithm_type").then(response => {
      //this.algorithmOptions = response.data;
    });
    this.getDicts("drug_match_type").then(response => {
      this.matchTypeOptions = response.data;
    });
  },
  methods: {
    changeRuleCategory(value){
      this.formRule.modelId = ''
      this.currentHide = value != 6 && value != 5
      if(this.currentHide){
        listModel({type:value}).then(response => {
          if (response.code === 200) {
            this.algorithmOptions = response.rows
          }
        })
      }
    },
    swithStatus (value) {
      console.log(value)
    },
    // 保存
    saveBtn () {
      let data = {expression:this.form.expression,id:this.drugRuleId}
      updateRule(data).then(response => {
        if (response.code === 200) {
          this.msgSuccess("保存成功");
          this.step = 0
          this.open = false
        }
      });
    },
    // 规则添加
    submitRuleForm () {
      console.log('ruleform')
      this.ruleShow = false;
      //this.formRule.tables = this.tableIds;
      this.tableData.push({...this.formRule,drugRuleId:this.drugRuleId,tables:this.resolveTables})
      this.ruleReset()
    },
    handleSelectionTableChange(selection) {
      this.tableIds = selection.map(item => item)
      this.tableSingle = selection.length!=1
      this.tableMultiple = !selection.length
    },
    handleSelectionColumnChange(selection) {
      this.tableColumnIds = selection.map(item => item)
      this.columnSingle = selection.length!=1
      this.columnMultiple = !selection.length
    },
    /** 打开导入表弹窗 */
    handleTable() {
      //this.reset();
      this.openTable = true;
      this.title = "选择表格属性";
      listDbTable(this.queryParams).then(response => {
        this.dbTableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleColumn(row){
      this.resolveTables = [];
      this.openColumn = true;
      this.tableRowData = row;
      this.title = "选择字段属性";
      listDbColumn(row.tableName).then(response => {
        this.dbColumnList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    submitTableForm(row){
        console.log(this.tableIds);
        this.openTable = false;
    },
    submitColumnForm(row){
      let me = this;
      this.tableColumnIds.forEach(function(item,index){
        const data = {
            tableName : me.tableRowData.tableName,
            tableComment : me.tableRowData.tableComment,
            tableColumn : item.columnName,
            tableColumnComment: item.columnComment
        };
        me.resolveTables.push(data);
      });
      console.log(this.resolveTables);
      this.openColumn = false;
    },
    cancelTable(){
      this.tableIds = [];
      this.openTable = false;
    },
    cancelColumn(){
      this.resolveTables = [];
      this.openColumn = false;
    },
        // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 规则分类,0字符,1数字字典翻译
    ruleCategoryFormat(row, column) {
      return this.selectDictLabel(this.ruleCategoryOptions, row.ruleCategory);
    },
    // 规则类型字典翻译
    ruleTypeFormat(row, column) {
      return this.selectDictLabel(this.ruleTypeOptions, row.ruleType);
    },
    // 算法类型字典翻译
    algorithmFormat(row, column) {
      return this.selectDictLabel(this.algorithmOptions, row.algorithm);
    },
    // 字符匹配方式字典翻译
    matchTypeFormat(row, column) {
      return this.selectDictLabel(this.matchTypeOptions, row.matchType);
    },
    // 规则取消
    cancel() {
      this.tableIds = [];
      this.ruleShow = false;
      this.ruleReset()
    },
    // 规则重置
    ruleReset () {
      this.formRule = {
        ruleCategory:'5',
        semanteme:'',
        keywords:'',
        algorithm:'',
        code:"",
        modelId:"",
        tables:[]
      }
      this.currentHide = false
    },
    fromReset () {
      this.form = {
        drugId: undefined,
        drugName: undefined,
        tag: undefined,
        ruleName: undefined,
        status: '0',
        updateBy: undefined,
        expression:'',
      }
    },
    // 新增
    submitSuccess() {
      addRuleDetails(this.tableData).then(response => {
          if (response.code === 200) {
            this.msgSuccess("新增成功");
            this.step = 2
          }
        });
    },
    // 新增规则
    add_rule () {
      this.tableIds = []
      this.tables = []
      this.resolveTables = []
      this.dbTableList = []
      this.dbColumnList = []
      this.ruleShow = true;
    },
    /** 查询药品规则列表 */
    getList() {
      this.loading = true;
      listRule(this.queryParams).then(response => {
        this.ruleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {

      this.open = true;
      this.currentHide = true
      this.step = 0
      this.title = "添加药品规则";
      this.tableData = []
      this.drugRuleId = ''
      this.fromReset()
      this.ruleReset()
      this.tableIds = []
      this.tables = []
      this.dbTableList = []
      this.dbColumnList = []
      this.resolveTables = []
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id || this.ids
      getRule(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改药品规则";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateRule(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.step = 1
                this.getList();
              }
            });
          } else {
            addRule(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.step = 1
                this.drugRuleId = response.data
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除药品规则编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delRule(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/rule/export', {
        ...this.queryParams
      }, `system_rule.xlsx`)
    }
  }
};
</script>


<style lang="scss" scoped>
  ::v-deep .el-drawer__header {
    margin-bottom: 0px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
  }
  ::v-deep .el-drawer:focus {
    border: none;
    outline: none;
  }
  ::v-deep .el-drawer__body {
    overflow: hidden;
  }
  ::v-deep .el-drawer__close-btn{
    border: none;
    outline: none;
  }
  .drawerTitle {
    font-weight: bold;
    font-size: 16px;
  }
  .btnStyle{
    text-align: center;
    padding:20px 0;
  }
  .textStyle{
    color:#000000
  }
   .drawerContent{
    padding:20px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .title{
        height: 40px;
        line-height: 40px;
        font-size: 16px;
    }
    .userInfo{
        height: 40px;
        line-height: 40px;
        font-weight: bold;
    }
    .detail_upload{
        display: flex;
        padding: 20px 0;
        .detail_left{
            font-size:14px;
            &_left{
                width: 120px;
            }
            &_right{
                width: 120px;
            }
        }
        .detail_right{
            flex: 1;
        }
    }
    .detail_content{
        display: flex;
        height: 52px;
        line-height: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .detail_left{
            font-size:14px;
            &_left{
                width: 120px;
            }
            &_right{
                width: 120px;
            }
        }
        .detail_right{
            flex: 1;
            .detail_right_pic{
                height: 100px;
                width: 100px;
            }
            .editBtn{
                float: right;
                padding:0 20px;
                color: #409EFF;
                cursor: pointer;
            }
        }
    }
    .reason{
        display: flex;
        line-height: 28px;
        padding:10px 0;
        overflow: hidden;
        .detail_left{
            font-size:14px;
            &_left{
                width: 120px;
            }
        }
        .detail_right{
            flex: 1;
            word-break: break-all;
        }
    }
    .btn{
        padding: 32px 0;
    }
    .addBtn{
      padding:20px 0;
    }
}


</style>
